<script setup>
import {ref} from "vue";
import empty_img from "@/assets/images/empty_img.png";
import HomeApis from "@/apis/home.js";
import ListApis from "@/apis/list.js";
import VideoApis from "@/apis/video.js";
import MyResourceApis from "@/apis/myResource.js";
import {ArrowLeft, ArrowRight, Clock} from '@element-plus/icons-vue'
import useUserStore from "@/stores/user.js";
import ChapterVideo from "@/views/mine/components/ChapterVideo.vue";
import {formatToMouth} from '@/utils/format.js'
import empty2 from '@/assets/images/empty2.png'
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import config from "@/config/index.js";


// const options = ref([])

const columnsList = ref([]);
const userStore = useUserStore();
let selectCategory = ref(null)
const showChapterVideo = ref(false)
const selectColumnId = ref(null);
const calendarValue = ref(new Date())
const router=useRouter()
const props = ref({
  // multiple: true,
  lazy: true,
  lazyLoad(node, resolve) {
    const {level} = node;
    // console.log(node, level)
    if (level == 0) {
      ListApis.industryList().then((res) => {
        if (res.code == 1 && res.data) {
          res.data.forEach((item) => {
            item.label = item.name;
            item.value = item.id;
            item.leaf = false;
          });
          resolve(res.data);
        } else {
          resolve([]);
        }
      });
    } else if (level == 1) {
      ListApis.examByIndustry({
        params: {
          size: 1000,
          industryId: node.value,
        },
      }).then((res) => {
        if (res.data) {
          res.data.forEach((item) => {
            item.label = item.name;
            item.value = item.id;
            item.leaf = false;
          });
          resolve(res.data);
        } else {
          resolve([]);
        }
      });
    } else if (level == 2) {
      ListApis.leafList({
        params: {examId: node.value, parentId: 0},
      }).then((res) => {
        if (res.data) {
          res.data.forEach((item) => {
            item.label = item.name;
            item.value = item.id;
            item.leaf = item.hasChild ? false : true;
          });
          resolve(res.data);
        } else {
          resolve([]);
        }
      });
    } else {
      ListApis.leafList({
        params: {examId: node.data.examId, parentId: node.value},
      }).then((res) => {
        if (res.data) {
          res.data.forEach((item) => {
            item.label = item.name;
            item.value = item.id;
            item.leaf = item.hasChild ? false : true;
          });
          resolve(res.data);
        } else {
          resolve([]);
        }
      });
    }
  },
});
const freeTypes = ['全部', '免费', '已购'];
const selectFreeType = ref(0)
const liveList = ref([])
const monthLiveList=ref([])
const calendar = ref(null)
const drawer=ref(false)
const resources = ref([])
// let calendarEventsData = computed(() => {
//   // liveList
//   return [
//     { date: '2025-04-01', type: 'event1' },
//     { date: '2025-04-05', type: 'event1' },
//
//   ]
// })
const todayLive=computed(() => {
  let date=new Date();
  const str2=''+date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()
  return monthLiveList.value.find(e => {
    let arr=e.liveDate.split('-');
    const year=Number(arr[0])
    const month=Number(arr[1])
    const day=Number(arr[2])
    const str1=''+year+'-'+month+'-'+day
    return str2==str1;
  })
})

// 什么类型，是本月的吗
function getCalendarList(type, isThisMonth) {
  let now = new Date();
  if (!type) {
    VideoApis.videoList({
      params: {
        current: 1,
        size: 100,
        categoryId: userStore.selectCategory.categoryId,
        // isFree: 'all',
        noLogin: false,
        // columnIds: res.data.map(e => e.id)
      }
    }).then(res1 => {
      liveList.value = res1.data.records || []

      const date=new Date(now.getFullYear(), now.getMonth())
      date.setHours(8)
      monthLiveList.value = res1.data.records.filter(e => {
        return date.getTime() == new Date(e.liveDate.substring(0, e.liveDate.lastIndexOf("-"))).getTime()
      })
    })

  } else {
    if (isThisMonth) {
      return ListApis.columnByCategory({
        params: {
          categoryId: userStore.selectCategory.categoryId,
          columnPosition: 'JGQY',
          type: 1,
        }
      }).then(res=>{
        return VideoApis.videoList({
          params: {
            current: 1,
            size: 100,
            categoryId: userStore.selectCategory.categoryId,
            isFree: type,
            noLogin: false,
            columnIds: res.data.map(e => e.id)
          }
        }).then(res1 => {
          const date=new Date(now.getFullYear(), now.getMonth())
          date.setHours(8)
          const filterArr=res1.data.records.filter(e => {
            return date.getTime() == new Date(e.liveDate.substring(0, e.liveDate.lastIndexOf("-"))).getTime()

          })
          monthLiveList.value = filterArr
        })
      })

    }
     ListApis.columnByCategory({
      params: {
        categoryId: userStore.selectCategory.categoryId,
        columnPosition: 'JGQY',
        type: 1,
      }
    }).then(res => {
       VideoApis.videoList({
         params: {
           current: 1,
           size: 100,
           categoryId: userStore.selectCategory.categoryId,
           isFree: type,
           noLogin: false,
           columnIds: res.data.map(e => e.id)
         }
       }).then(res1 => {
         const date=new Date(now.getFullYear(), now.getMonth())
         date.setHours(8)
         const filterArr=res1.data.records.filter(e => {
           return date.getTime() == new Date(e.liveDate.substring(0, e.liveDate.lastIndexOf("-"))).getTime()
         })
         monthLiveList.value = filterArr
       })
     })

  }
}

function getDateClass(date) {

  const event = liveList.value.find(e => {
    return e.liveDate === date
  });
  if (event) {
    // 是已结束，未开始，正在直播

    let now=new Date();
    if(now.getTime()>new Date(event.liveDate+' '+event.endTime).getTime()){
      return `event-event1`;
    }else if(now.getTime()<new Date(event.liveDate+' '+event.startTime).getTime()){
      return `event-event2`;
    }else{
      return `event-event3`;
    }

  }
  return '';
}
function showTips( data) {


    const obj=liveList.value.find(e=>{
      return e.liveDate==data.day
    })
    if (obj) {
      ElMessage({
        message: obj.title + '将于这天直播',
        type: 'warning',
        duration: 2000,
      })
    }

}
// 获取栏目（应该是已购买或者免费的）
function getColumnsByCategory(data) {

  // 获取科目
  if (data) {
    MyResourceApis.myBuyAsset({
      params: {type: 'video', categoryIds: data.categoryId}
    }).then((res) => {
      if (res.data.length > 0) {
        columnsList.value = res.data[0].columnModels;
      }
    })
  }
}

function handleChange(val) {
  // 设置本地并请求
  HomeApis.settingChoose({
    categoryList: [{categoryId: val.at(-1), ifCheck: true}],
  }).then((res) => {
    if (res.code == 1) {
      showChapterVideo.value = false
      userStore.setSelectCategory({
        examId: val[1],
        industryId: val[0],
        industryCode: val[0],
        categoryCode: val.at(-1),
        categoryId: val.at(-1),
      });
      //   获取直播
      getCalendarList()
    }
  });
}

async function init() {
  if (userStore.selectCategory) {
    selectCategory.value = [
      userStore.selectCategory.industryCode,
      userStore.selectCategory.examId,
      userStore.selectCategory.categoryId,
    ];
  } else {
    const res = await HomeApis.currentChoose()
    selectCategory.value = [
      res.data.industryCode,
      res.data.examId,
      res.data.categoryId,
    ];
  }
  getCalendarList()
  // liveList.value=[{
  //
  // }]
}

function selectDate(val) {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}

function toggleIndex(index) {
  if (selectFreeType.value == index) return;
  selectFreeType.value = index
  if (index == 0) {
    // 全部
    getCalendarList()
  } else if (index == 1) {
    // 只过滤出本月直播
    getCalendarList("freeFlag")
  } else if (index == 2) {
    // 只过滤出本月直播
    getCalendarList("payFlag")
  }
}
function goAppointment(item){
  VideoApis.haveAppoint({
    params:{
      liveId: item.id
    }
  }).then(res=>{
    if(res.data){
      ElMessage({
        message: '您已预约过该场直播',
        type: 'warning',
      })
      return
    }else{
      router.push({
        path: '/live/appointment/index',
        query: {
          id: item.id,
          categoryId:  item.categoryId
        }
      })
    }
  }).catch(err=>{
    router.push({
      path: '/live/appointment/index',
      query: {
        id: item.id,
        categoryId:  item.categoryId
      }
    })
  })
}
function downloadResource(item){
//   已经有权限的（购买了相关栏目资源的）可以下载讲义，这个讲义是对应章节或者其他栏目的

//   获取对应栏目章节的资料,根据章节id获取videoIds，/list-by-video获取资料
  VideoApis.getResource({
    params:{
      chapterId: item.id
    }
  }).then(res=>{
    resources.value = res.data
    drawer.value=true
  })
}
function download(row) {

  fetch(config.prefix_image + row.url, {
    method: 'GET',
  })
      .then(response => response.blob())
      .then(blob => {
        // 创建一个虚拟的链接元素，模拟点击下载
        const link = document.createElement('a');
        link.style.display = 'none';
        const url = window.URL.createObjectURL(blob);
        link.href = url;
        link.download = row.name;
        document.body.appendChild(link);

        // // 模拟点击
        link.click();
        // // 移除虚拟链接元素
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url)
      })
}
function preview(row) {
  window.open(config.prefix_image + row.url)

}
init()
</script>

<template>
  <div class="live-calendar-container">
    <div class="content1">
      <div class="live-calendar-container-top-header">
        <div class="live-calendar-container-top-header-left">
          <el-cascader
              class="MyCourse-cascader"
              v-model="selectCategory"
              filterable
              :props="props"
              :show-all-levels="false"
              @change="handleChange"
          />
        </div>

      </div>
      <div class="content-item1">
        <div class="item1-left">
          <el-calendar v-model="calendarValue" ref="calendar">
            <template #header="{ date }">
              <div class="my-calendar-header">
                <div class="calendar-icon-container" @click="selectDate('prev-month')">
                  <el-icon :size="22">
                    <ArrowLeft/>
                  </el-icon>
                </div>
                <span>
                 {{ date }}
                </span>
                <div class="calendar-icon-container" @click="selectDate('next-month')">
                  <el-icon :size="22">
                    <ArrowRight/>
                  </el-icon>
                </div>
              </div>
            </template>
            <template #date-cell="{ data }">
              <div :class="getDateClass(data.day)" @click="showTips(data)">
                {{ data.date.getDate() }}
              </div>
            </template>
          </el-calendar>
          <div class="series-tips">
            <div class="series-tips-item">
              <div class="tips-icon1">

              </div>
              <span>已结束</span>
            </div>
            <div class="series-tips-item">
              <div class="tips-icon2"></div>
              <span>未开始</span>
            </div>
            <div class="series-tips-item">
              <div class="tips-icon3"></div>
              <span>进行中</span>
            </div>
          </div>
        </div>
        <div class="item1-right">
          <div>
            <div class="item1-right-top-title">
              <div class="today-icon"></div>
              <div class="today-live-text">今日直播</div>
            </div>
          </div>
          <div class="item1-right-bottom">
            <div class="item1-right-bottom-empty" v-if="!todayLive">
              <img :src="empty2" class="empty2-img">
            </div>
            <div v-else class="width100">
              <div class="scroll-item">
                <div class="scroll-item-a">
                  <div
                      class="scroll-item-b"
                  >
                    <div
                        class="scroll-item-c"
                    ></div>
                    <img class="scroll-item-d"
                         src="https://placehold.co/109x187"/>
                  </div>
                  <div
                      class="scroll-item-e"
                  >
                    <div class="scroll-item-f">
                      <div class="scroll-item-g">
                        <div
                            class="scroll-item-h"
                        >

                        </div>
                        <div
                            class="scroll-item-j"
                        >
                          {{ todayLive.title }}
                        </div>
                      </div>
                      <div
                          class="scroll-item-k"
                      >
                      </div>
                      <div
                          class="scroll-item-m"
                      >
                        <div
                            class="scroll-item-n"
                        >
                          {{ todayLive.teacherName }}
                        </div>
                        <div
                            class="scroll-item-o"
                        >
                          <!--                        <div-->
                          <!--                            class="scroll-item-p"-->
                          <!--                        >-->
                          <!--                          中级经济师-->
                          <!--                        </div>-->
                          <div class="scroll-item-p">
                            {{
                              todayLive.appointmentNum
                            }}人预约
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                      class="scroll-item-q"
                      style="">
                    <div
                        class="scroll-item-r"
                        style="">
                      <el-icon size="20">
                        <Clock/>
                      </el-icon>

                      <div
                          class="scroll-item-t"
                          style="">
                        {{ todayLive.liveDate }} {{
                          todayLive.startTime.substring(0, todayLive.startTime.lastIndexOf(':'))
                        }}-{{ todayLive.endTime.substring(0, todayLive.endTime.lastIndexOf(':')) }}
                      </div>
                    </div>
                  </div>
                </div>
<!--                <div-->
<!--                    class="scroll-item-u"-->
<!--                    style="">-->
<!--                  <div-->
<!--                      class="scroll-item-v"-->
<!--                  >-->
<!--                    合集-->
<!--                  </div>-->
<!--                </div>-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content2">
      <div class="content2-top">
        <div class="content2-icon">

        </div>
        <div class="content2-top-title-container">
          <span class="month-live-title-text">
            本月直播
          </span>
          <div>
            <el-button text :type="selectFreeType==index?'primary':'info'" v-for="(item,index) in freeTypes" :key="index"
                       @click="toggleIndex(index)">
              {{ item }}
            </el-button>
          </div>
        </div>
      </div>
      <div class="content2-content">
        <el-scrollbar height="340">
          <div class="content2-content-scroll">
            <div class="scroll-item" v-for="(item,index) in monthLiveList" :key="index">
              <div class="scroll-item-a">
                <div
                    class="scroll-item-b"
                >
                  <div
                      class="scroll-item-c"
                  ></div>
                  <img class="scroll-item-d"
                       src="https://placehold.co/109x187"/>
                </div>
                <div
                    class="scroll-item-e"
                >
                  <div class="scroll-item-f">
                    <div class="scroll-item-g">
                      <div
                          class="scroll-item-h"
                      >
                        <div
                            class="scroll-item-i"
                        >
                          购课
                        </div>
                      </div>
                      <div
                          class="scroll-item-j"
                      >
                        {{ item.title }}
                      </div>
                    </div>
                    <div
                        class="scroll-item-k"
                    >
                      <!--                      <div-->
                      <!--                          class="scroll-item-l"-->
                      <!--                      >-->
                      <!--                       <span class="scroll-item-l-text1">直播日期：{{ item.liveDate }}</span>   直播时间：{{ item.startTime.substring(0,item.startTime.lastIndexOf(':')) }}-{{ item.endTime.substring(0,item.endTime.lastIndexOf(':')) }}-->
                      <!--                      </div>-->
                    </div>
                    <div
                        class="scroll-item-m"
                    >
                      <div
                          class="scroll-item-n"
                      >
                        {{ item.teacherName }}
                      </div>
                      <div
                          class="scroll-item-o"
                      >
                        <!--                        <div-->
                        <!--                            class="scroll-item-p"-->
                        <!--                        >-->
                        <!--                          中级经济师-->
                        <!--                        </div>-->
                        <div class="scroll-item-p">
                          {{
                            item.appointmentNum
                          }}人预约
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                    class="scroll-item-q"
                    style="">
                  <div
                      class="scroll-item-r"
                      style="">
                    <el-icon size="20">
                      <Clock/>
                    </el-icon>

                    <div
                        class="scroll-item-t"
                        style="">
                      {{ item.liveDate }} {{
                        item.startTime.substring(0, item.startTime.lastIndexOf(':'))
                      }}-{{ item.endTime.substring(0, item.endTime.lastIndexOf(':')) }}
                    </div>
                  </div>
                  <div
                  >

                    <el-button round class="scroll-btn" @click="downloadResource(item)">讲义下载</el-button>
                    <el-button round type="primary" class="scroll-btn" @click="goAppointment(item)">预约</el-button>
                  </div>
                </div>
              </div>
              <div
                  class="scroll-item-u"
                  style="">
                <div
                    class="scroll-item-v"
                >
                  合集
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>


<!--    讲义下载-->
    <el-drawer  v-model="drawer" direction="rtl" size="40%">
      <el-table :data="resources">
        <el-table-column label="文件名" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="180px">
          <template #default="{ row }">
            <div>
              <el-button type="primary" @click="download(row)">下载</el-button>
              <el-button type="primary" @click="preview(row)">预览</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<style scoped>
.live-calendar-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.content1 {
  border-radius: 12px;
  overflow: hidden;
}

.live-calendar-container-top-header {
  background: #f8fbff;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 22px;
}

.live-calendar-container-top-header-right {
  display: flex;
  gap: 31px;
}

.live-calendar-container-top-header-right-text {
  padding: 0 16px;
  line-height: 50px;
}

.live-calendar-container-top-header-right-text.active {
  color: #ffffff;
  background: #409eff;
}

.MyCourse-cascader {
  height: 50px;
}

.content-item1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  background: white;

}

.my-calendar-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  padding: 0 5px;
}

.calendar-icon-container {
  width: 27px;
  height: 27px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item1-left {
  width: 335px;
  height: 440px;
  border-radius: 12px;
  background: linear-gradient(187deg, #D7E1FF 2.72%, #FFF 123.83%);
  padding: 10px 5px;
  position: relative;
}

.series-tips {
  position: absolute;
  width: 300px;
  height: 20px;
  bottom: 16px;
  right: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
}

.item1-left ::v-deep(.el-calendar) {
  --el-calendar-cell-width: 40px;
  --el-calendar-border: none;
  background-color: transparent;
}

.item1-left ::v-deep(.el-calendar__body) {
  background: white;
  border-radius: 10px;
}

.item1-left ::v-deep(.el-calendar-day) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item1-left ::v-deep(td) {
  border-radius: 50%;
}

.item1-right {
  width: 783px;
  height: 440px;
  border-radius: 12px;
  background: #F1F5FF;
  box-sizing: border-box;
  padding: 16px 8px;
}

.item1-right-top-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.today-icon {
  width: 4px;
  height: 20px;
  background: rgba(60.35, 108.20, 255, 0.50);
  border-radius: 55px
}

.today-live-text {
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #333333;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
}

.item1-right-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item1-right-bottom-empty {
  width: 290px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty2-img {
  width: 290px;
  height: 220px;
}

.content2 {
  background: #FAFAFA;
  border-radius: 12px;
}

.content2-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 12px;

}

.content2-icon {
  width: 4px;
  height: 20px;
  background: #3C6CFF;
}

.content2-top-title-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 32px;
}

.month-live-title-text {
  color: #333;
  font-size: 18px;
  font-weight: 700;
}

.content2-content {
  padding: 20px;
}

.content2-content-scroll {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: white;
  border-radius: 8px;
}

.scroll-item {
  align-self: stretch;
  height: 160px;
  padding-top: 36px;
  padding-bottom: 36px;
  position: relative;
  background: white;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: inline-flex
}

.scroll-item-a {
  flex: 1 1 0;
  padding-left: 20px;
  padding-right: 28px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex
}

.scroll-item-b {
  width: 82px;
  height: 82px;
  position: relative;
  background: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.40) 100%);
  overflow: hidden;
  border-radius: 40px
}

.scroll-item-c {
  width: 88.67px;
  height: 133px;
  left: -2px;
  top: -20px;
  position: absolute;
  background: #EDEDED
}

.scroll-item-d {
  width: 109.40px;
  height: 187px;
  left: -10px;
  top: -2px;
  position: absolute
}

.scroll-item-e {
  flex: 1 1 0;
  padding-left: 30px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: inline-flex
}

.scroll-item-f {
  align-self: stretch;
  height: 81.33px;
  position: relative
}

.scroll-item-g {
  width: 759.58px;
  height: 22.13px;
  left: 0px;
  top: 0px;
  position: absolute
}

.scroll-item-h {
  width: 40px;
  padding-left: 7px;
  padding-right: 7px;
  left: 0px;
  top: 1.73px;
  position: absolute;
  background: #3C6CFF;
  border-radius: 4px;
  justify-content: flex-start;
  align-items: flex-start;
  display: inline-flex
}

.scroll-item-i {
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: white;
  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: 700;
  line-height: 20px;
  word-wrap: break-word
}

.scroll-item-j {
  width: 316.57px;
  height: 21.33px;
  left: 40px;
  top: 0px;
  position: absolute;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #333333;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 700;
  word-wrap: break-word
}

.scroll-item-k {
  width: 759.58px;
  left: 0px;
  top: 38.13px;
  position: absolute;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: inline-flex
}

.scroll-item-l {
  justify-content: center;
  display: flex;
  gap: 20px;
  color: #666666;
  font-size: 14px;
  font-weight: 400;
  word-wrap: break-word
}

.scroll-item-l-text1 {

}

.scroll-item-m {
  width: 759.58px;
  left: 0px;
  top: 60.27px;
  position: absolute;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  display: inline-flex
}

.scroll-item-n {
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #666666;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  word-wrap: break-word
}

.scroll-item-o {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 0.54px;
  padding-bottom: 0.54px;
  background: #F0F5FF;
  border-radius: 4px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex
}

.scroll-item-p {
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #5373B1;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  word-wrap: break-word
}

.scroll-item-q {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 25px;
  display: inline-flex
}

.scroll-item-r {
  align-self: stretch;
  padding-left: 8px;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  display: inline-flex
}

.scroll-item-s {
  width: 20px;
  height: 20px
}

.scroll-item-t {
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  word-wrap: break-word
}

.scroll-item-u {
  width: 68px;
  height: 32px;
  left: 0px;
  top: 0px;
  position: absolute;
  background: linear-gradient(90deg, #FFF7EB 0%, #FFE7D6 100%);
  border-bottom-right-radius: 30px
}

.scroll-item-v {
  width: 28.37px;
  height: 32px;
  left: 20px;
  top: -0.53px;
  position: absolute;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #8C3111;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 32px;
  word-wrap: break-word
}

.scroll-btn {
  min-width: 120px;
}

.event-event1 {
  color: rgba(0, 255, 0, 0.5);
}
.event-event2 {
  color: rgba(255, 0, 0, 0.5);
}
.event-event3 {
  color: rgba(0, 0, 255, 0.5);
}

.series-tips-item {
  display: flex;
  gap: 10px;
  align-items: center;
}

.tips-icon1 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 255, 0, 0.5);
}

.tips-icon2 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 1);
}
.tips-icon3 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 255, 0.5);
}
.width100{
  width: 100%;
}
.item1-right-bottom .scroll-item{
  margin-top: 20px;
  display: flex;
}
</style>